import React, { Component } from 'react'
import Order from './Order.jsx'
import User from './User.jsx'
import {connect} from 'react-redux'
import {actions as userActions, getShowInfo} from '../store/modules/user'
import {actions as orderActions, getList} from '../store/modules/order'
// bindActionCreators  作用是在mapDispatchToProps中一次性统一添加所有的action
import { bindActionCreators } from 'redux'


// Big1是一个中间产物，它是UI型组件，最后需要暴露的是容器型组件
class Big1 extends Component {
  render() {
    // console.log(this.props);
    return (
      <div>
        <p>我是大组件，包含了order和user，我是容器型组件</p>
        <hr/>
        {/* 这里是老的方法，需要逐个写action */}
        {/* <Order
          list={this.props.list}
          addOrder={this.props.addOrder}
          delOrder={this.props.delOrder}
        ></Order> */}
        {/* orderAction相当于老的写法中的所有的方法，都集合在这里了 */}
        <Order 
          list={this.props.list}
          orderAction={this.props.orderAction}
        ></Order>
        <User
          info={this.props.info}
          changeAge={this.props.changeAge}
          changeName={this.props.changeName}
        ></User>
      </div>
    )
  }
}
// connect还包含两个方法：mapStateToProps和mapDispatchToProps
// mapStateToProps 将State中的数据map（映射）到Props。作用是获取state中的数据,放到组件的props中
// mapDispatchToProps 将Dispatch映射到Props中，作用是修改数据
const mapStateToProps = (state)=>{
  // 给当前组件添加了几条数据，放到Props中
  return {
    // list: state.order.list,  // 这个是老的写法，换成selector就是getList
    list: getList(state),
    // info: state.user.info  // 这个是老的写法，换成selector就是getInfo
    info: getShowInfo(state)
  }
}
const mapDispatchToProps = (dispatch, ownProps)=>{
  // ownProps是组件本身的props，这里用不上，可以省略
  return {
    // 给当前组件添加了几个方法，用来修改数据，放到Props中
    changeAge: age => dispatch(userActions.changeAge(age)),
    changeName: (name)=>dispatch(userActions.changeName(name)),
    // addOrder: (order)=>dispatch(orderActions.addOrder(order)),
    // delOrder: (index)=>dispatch(orderActions.delOrder(index))
    // 以上是老的代码，需要逐个导入action。用了bindActionCreators就可以一次性全都导入
    orderAction: bindActionCreators(orderActions, dispatch)
  }
}
// connect方法，将UI型组件转换为容器型组件
const Big = connect(mapStateToProps, mapDispatchToProps)(Big1);
export default Big
